<template>
    <VWindow v-model="step" class="mt-6 disable-tab-transition">
    <VWindowItem :value="1">
      <div>
      <div class="d-flex flex-wrap justify-start justify-sm-space-between gap-y-4 gap-x-6 mb-6">
        <div class="d-flex flex-column justify-center">
          <h4 class="text-h4 font-weight-medium">
            发布任务
          </h4>
          <div class="text-body-1">
            提交后任务会发布到接单大厅
          </div>
        </div>
  
        <div class="d-flex gap-4 align-center flex-wrap">
          <VBtn
            variant="tonal"
            color="secondary"
            @click="router.back()"
          >
            返回
          </VBtn>
          <VBtn @click="handleSubmit()" :loading="loading">发布</VBtn>
        </div>
      </div>
  
      <VForm ref="formRef">
        <VRow>
          <VCol md="12">
            <!-- 👉 Product Information -->
            <VCard
              class="mb-6"
              title="任务信息"
            >
              <VCardText>
                <VRow>
                  <VCol cols="12" md="6">
                    <AppTextField
                      v-model="form.title"
                      label="标题"
                      placeholder="元素图制作"
                      :rules="formRules.title"
                    />
                  </VCol>
                  <VCol
                    cols="12"
                    md="6"
                  >
                    <AppTextField
                      v-model="form.price"
                      label="价格"
                      placeholder="100"
                      :rules="formRules.price"
                    />
                  </VCol>
                  <VCol>
                    <span class="mb-1">任务要求</span>
                    <ProductDescriptionEditor
                      v-model="form.description"
                      placeholder="制作XXXXXX图片 有XXXXXXX需求"
                      class="border rounded"
                    />
                  </VCol>
                </VRow>
              </VCardText>
            </VCard>
    
            <!-- 👉 Media -->
            <VCard class="mb-6">
              <VCardItem>
                <template #title>
                  任务图片
                </template>
                <!-- <template #append>
                  <span class="text-primary font-weight-medium text-sm cursor-pointer">通过URL添加媒体</span>
                </template> -->
              </VCardItem>
    
              <VCardText>
                <OssUploadDropZone v-model:fileUrls="form.image"/>
              </VCardText>
            </VCard>
          </VCol>
        </VRow>
      </VForm>
    </div>
    </VWindowItem>
    <VWindowItem :value="2">
      <v-empty-state icon="$success">
        <template v-slot:media>
          <v-icon color="surface-variant"></v-icon>
        </template>

        <template v-slot:headline>
          <div class="text-h4">
            发布成功
          </div>
        </template>

        <template v-slot:title>
          <div class="text-h6">
            任务发布之后通过审核将会在接单大厅展示
          </div>
        </template>

        <template v-slot:text>
          <div class="text-medium-emphasis text-caption">
            请耐心等待系统审核此次发布的任务,将在24小时内完成审核
          </div>
        </template>
        <template v-slot:actions>
          <v-btn @click="router.push({name:'task-center'})"
            class="text-none"
            elevation="1"
            rounded="lg"
            size="small"
            text="返回接单大厅"
            width="96"
            color="primary"
          ></v-btn>
        </template>
      </v-empty-state>
    </VWindowItem>
  </VWindow>
  </template>


<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { getCurrentInstance } from 'vue'
import { publishTask } from '@/api/task';
import OssUploadDropZone from '@/components/OssUploadDropZone.vue';
const router = useRouter();

const step = ref(1)

const {proxy} = getCurrentInstance()

const loading = ref(false)

const formRef = ref()


const form = ref({
  title: undefined,
  description: undefined,
  price: undefined,
  image:[]
});

const formRules = {
  title:[
    v=>!!v || "标题不能为空"
  ],
  price:[
    v=>v!=undefined || "价格不能为空"
  ]
}

const handleSubmit = async () => {
  console.log(form.value)
  const { valid } = await formRef.value.validate()
  if (!valid) {
    return
  }
  if (!form.value.description) {
    proxy.$toast.error("任务需求不能为空");
    return
  }
  loading.value = true
  await publishTask(form.value).finally(()=>loading.value = false)
  step.value = 2
}
</script>



<style lang="scss" scoped>
  .drop-zone {
    border: 2px dashed rgba(var(--v-theme-on-surface), 0.12);
    border-radius: 6px;
  }
</style>

<style lang="scss">
.inventory-card {
  .v-tabs.v-tabs-pill {
    .v-slide-group-item--active.v-tab--selected.text-primary {
      h6 {
        color: #fff !important;
      }
    }
  }

  .v-radio-group,
  .v-checkbox {
    .v-selection-control {
      align-items: start !important;
    }

    .v-label.custom-input {
      border: none !important;
    }
  }
}

.ProseMirror {
  p {
    margin-block-end: 0;
  }

  padding: 0.5rem;
  outline: none;

  p.is-editor-empty:first-child::before {
    block-size: 0;
    color: #adb5bd;
    content: attr(data-placeholder);
    float: inline-start;
    pointer-events: none;
  }
}
</style>
